<template>
  <div class="exempt-report-page">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="back-button" @click="goBack">
        <i class="iconfont icon-left"></i>
      </div>
      <div class="page-title">免上报登记</div>
      <div class="placeholder"></div>
    </div>

    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="menu-item" :class="{ active: activeMenu === 'home' }" @click="navigateTo('/')">
        <i class="iconfont icon-home"></i>
        <span>首页</span>
      </div>
      <div class="menu-item" :class="{ active: activeMenu === 'exempt-report' }" @click="navigateTo('/college/exempt-report')">
        <i class="iconfont icon-exempt"></i>
        <span>免上报登记</span>
      </div>
      <div class="menu-item" :class="{ active: activeMenu === 'role-switch' }" @click="navigateTo('/college/role-switch')">
        <i class="iconfont icon-switch"></i>
        <span>角色切换</span>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 搜索筛选区 -->
      <div class="filter-section">
        <div class="search-box">
          <input type="text" placeholder="搜索学生姓名或学号" v-model="searchKeyword">
          <button @click="searchExemptRecords"><i class="iconfont icon-search"></i></button>
        </div>
        <div class="filter-options">
          <div class="filter-item">
            <span>状态：</span>
            <select v-model="filterStatus">
              <option value="all">全部</option>
              <option value="pending">待审核</option>
              <option value="approved">已通过</option>
              <option value="rejected">已拒绝</option>
            </select>
          </div>
          <div class="filter-item">
            <span>日期：</span>
            <input type="date" v-model="filterDate">
          </div>
        </div>
      </div>

      <!-- 免上报记录列表 -->
      <div class="exempt-list">
        <div class="list-header">
          <div class="header-item">学生信息</div>
          <div class="header-item">申请日期</div>
          <div class="header-item">免上报原因</div>
          <div class="header-item">状态</div>
          <div class="header-item">操作</div>
        </div>
        <div v-if="exemptRecords.length === 0" class="empty-data">
          <i class="iconfont icon-empty"></i>
          <p>暂无免上报记录</p>
        </div>
        <div v-else class="list-content">
          <div v-for="(record, index) in exemptRecords" :key="index" class="list-item">
            <div class="item-cell student-info">
              <div class="student-name">{{ record.studentName }}</div>
              <div class="student-id">{{ record.studentId }}</div>
              <div class="student-class">{{ record.className }}</div>
            </div>
            <div class="item-cell">{{ record.applyDate }}</div>
            <div class="item-cell reason">{{ record.reason }}</div>
            <div class="item-cell status">
              <span :class="getStatusClass(record.status)">{{ getStatusText(record.status) }}</span>
            </div>
            <div class="item-cell actions">
              <button v-if="record.status === 'pending'" class="approve-btn" @click="approveExempt(record.id)">通过</button>
              <button v-if="record.status === 'pending'" class="reject-btn" @click="rejectExempt(record.id)">拒绝</button>
              <button class="detail-btn" @click="viewExemptDetail(record)">详情</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <button :disabled="currentPage === 1" @click="changePage(currentPage - 1)">
          <i class="iconfont icon-left"></i>
        </button>
        <span>{{ currentPage }} / {{ totalPages }}</span>
        <button :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)">
          <i class="iconfont icon-right"></i>
        </button>
      </div>
    </div>

    <!-- 免上报详情弹窗 -->
    <div class="modal" v-if="showDetailModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>免上报详情</h3>
          <button class="close-btn" @click="showDetailModal = false">
            <i class="iconfont icon-close"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="detail-item">
            <span class="label">学生姓名：</span>
            <span class="value">{{ currentRecord.studentName }}</span>
          </div>
          <div class="detail-item">
            <span class="label">学号：</span>
            <span class="value">{{ currentRecord.studentId }}</span>
          </div>
          <div class="detail-item">
            <span class="label">班级：</span>
            <span class="value">{{ currentRecord.className }}</span>
          </div>
          <div class="detail-item">
            <span class="label">申请日期：</span>
            <span class="value">{{ currentRecord.applyDate }}</span>
          </div>
          <div class="detail-item">
            <span class="label">免上报原因：</span>
            <span class="value">{{ currentRecord.reason }}</span>
          </div>
          <div class="detail-item">
            <span class="label">状态：</span>
            <span class="value" :class="getStatusClass(currentRecord.status)">{{ getStatusText(currentRecord.status) }}</span>
          </div>
          <div class="detail-item" v-if="currentRecord.attachments && currentRecord.attachments.length > 0">
            <span class="label">附件：</span>
            <div class="attachments">
              <div v-for="(attachment, index) in currentRecord.attachments" :key="index" class="attachment-item">
                <i class="iconfont icon-file"></i>
                <span>{{ attachment.name }}</span>
                <button @click="downloadAttachment(attachment)">下载</button>
              </div>
            </div>
          </div>
          <div class="detail-item" v-if="currentRecord.reviewComment">
            <span class="label">审核意见：</span>
            <span class="value">{{ currentRecord.reviewComment }}</span>
          </div>
        </div>
        <div class="modal-footer" v-if="currentRecord.status === 'pending'">
          <button class="approve-btn" @click="approveExempt(currentRecord.id)">通过</button>
          <button class="reject-btn" @click="showRejectModal = true; showDetailModal = false">拒绝</button>
        </div>
      </div>
    </div>

    <!-- 拒绝原因弹窗 -->
    <div class="modal" v-if="showRejectModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>拒绝原因</h3>
          <button class="close-btn" @click="showRejectModal = false">
            <i class="iconfont icon-close"></i>
          </button>
        </div>
        <div class="modal-body">
          <textarea v-model="rejectReason" placeholder="请输入拒绝原因..."></textarea>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="showRejectModal = false">取消</button>
          <button class="confirm-btn" @click="confirmReject">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExemptReport',
  data() {
    return {
      activeMenu: 'exempt-report',
      searchKeyword: '',
      filterStatus: 'all',
      filterDate: '',
      currentPage: 1,
      pageSize: 10,
      totalRecords: 0,
      exemptRecords: [
        {
          id: 1,
          studentName: '张三',
          studentId: '2020001001',
          className: '计算机科学与技术2001班',
          applyDate: '2023-10-15',
          reason: '因参加学校组织的比赛，需要外出一周',
          status: 'pending',
          attachments: [
            { name: '比赛通知.pdf', url: '#' },
            { name: '指导老师证明.docx', url: '#' }
          ]
        },
        {
          id: 2,
          studentName: '李四',
          studentId: '2020001002',
          className: '计算机科学与技术2001班',
          applyDate: '2023-10-14',
          reason: '因病住院治疗，预计需要两周时间',
          status: 'approved',
          reviewComment: '已查看医院证明，情况属实',
          attachments: [
            { name: '住院证明.jpg', url: '#' }
          ]
        },
        {
          id: 3,
          studentName: '王五',
          studentId: '2020001003',
          className: '计算机科学与技术2001班',
          applyDate: '2023-10-13',
          reason: '家中有事，需要请假三天',
          status: 'rejected',
          reviewComment: '理由不充分，请提供更详细的说明',
          attachments: []
        }
      ],
      showDetailModal: false,
      showRejectModal: false,
      currentRecord: {},
      rejectReason: ''
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalRecords / this.pageSize) || 1
    }
  },
  created() {
    this.totalRecords = this.exemptRecords.length
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    navigateTo(path) {
      this.$router.push(path)
    },
    searchExemptRecords() {
      // 实现搜索逻辑
      console.log('搜索关键词:', this.searchKeyword)
      console.log('筛选状态:', this.filterStatus)
      console.log('筛选日期:', this.filterDate)
    },
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        // 加载对应页的数据
      }
    },
    getStatusClass(status) {
      switch (status) {
        case 'pending': return 'status-pending'
        case 'approved': return 'status-approved'
        case 'rejected': return 'status-rejected'
        default: return ''
      }
    },
    getStatusText(status) {
      switch (status) {
        case 'pending': return '待审核'
        case 'approved': return '已通过'
        case 'rejected': return '已拒绝'
        default: return '未知'
      }
    },
    viewExemptDetail(record) {
      this.currentRecord = record
      this.showDetailModal = true
    },
    approveExempt(id) {
      // 实现通过审核的逻辑
      console.log('通过免上报申请:', id)
      // 更新状态
      const record = this.exemptRecords.find(r => r.id === id)
      if (record) {
        record.status = 'approved'
        record.reviewComment = '已审核通过'
      }
      this.showDetailModal = false
    },
    rejectExempt(id) {
      this.currentRecord = this.exemptRecords.find(r => r.id === id)
      this.showRejectModal = true
    },
    confirmReject() {
      // 实现拒绝审核的逻辑
      console.log('拒绝免上报申请:', this.currentRecord.id)
      console.log('拒绝原因:', this.rejectReason)
      // 更新状态
      const record = this.exemptRecords.find(r => r.id === this.currentRecord.id)
      if (record) {
        record.status = 'rejected'
        record.reviewComment = this.rejectReason
      }
      this.showRejectModal = false
      this.rejectReason = ''
    },
    downloadAttachment(attachment) {
      // 实现附件下载逻辑
      console.log('下载附件:', attachment.name)
    }
  }
}
</script>

<style scoped>
.exempt-report-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #1890ff;
  color: white;
  padding: 0 15px;
}

.back-button {
  font-size: 20px;
  cursor: pointer;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
}

.placeholder {
  width: 20px;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 50px;
  bottom: 0;
  width: 80px;
  background-color: #001529;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
}

.menu-item i {
  font-size: 24px;
  margin-bottom: 5px;
}

.menu-item.active {
  background-color: #1890ff;
}

.main-content {
  margin-left: 80px;
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.filter-section {
  background-color: white;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-box {
  display: flex;
  margin-bottom: 15px;
}

.search-box input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 0 15px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-item span {
  margin-right: 8px;
}

.filter-item select,
.filter-item input {
  padding: 6px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: none;
}

.exempt-list {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.list-header {
  display: flex;
  background-color: #f0f2f5;
  padding: 12px 15px;
  font-weight: bold;
}

.header-item {
  flex: 1;
  text-align: center;
}

.empty-data {
  padding: 40px 0;
  text-align: center;
  color: #999;
}

.empty-data i {
  font-size: 48px;
  margin-bottom: 10px;
}

.list-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #f0f2f5;
}

.item-cell {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.student-info {
  text-align: left;
}

.student-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.student-id,
.student-class {
  font-size: 12px;
  color: #666;
}

.reason {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.status-pending {
  color: #faad14;
}

.status-approved {
  color: #52c41a;
}

.status-rejected {
  color: #f5222d;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.approve-btn,
.reject-btn,
.detail-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.approve-btn {
  background-color: #52c41a;
  color: white;
}

.reject-btn {
  background-color: #f5222d;
  color: white;
}

.detail-btn {
  background-color: #1890ff;
  color: white;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 15px;
}

.pagination button {
  background-color: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

.pagination button:disabled {
  color: #d9d9d9;
  cursor: not-allowed;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 4px;
  width: 500px;
  max-width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f2f5;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 20px;
}

.detail-item {
  margin-bottom: 15px;
}

.label {
  font-weight: bold;
  margin-right: 8px;
  color: #666;
}

.attachments {
  margin-top: 10px;
}

.attachment-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.attachment-item i {
  margin-right: 8px;
  color: #1890ff;
}

.attachment-item span {
  flex: 1;
}

.attachment-item button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.modal-body textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  resize: none;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
  border-top: 1px solid #f0f2f5;
  gap: 10px;
}

.cancel-btn,
.confirm-btn {
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn {
  background-color: white;
  border: 1px solid #d9d9d9;
}

.confirm-btn {
  background-color: #1890ff;
  color: white;
  border: none;
}
</style>